<template>
  <div class="ui-cols" :style="style">
    <div v-if="title" class="ui-cols-title">
      {{ title }}
    </div>
    <div class="ui-cols-body scroll">
      <div v-for="x in data" :key="x.id" class="ui-cols-item" :class="{ small }" @click="itemClick(x)">
        <img :src="x.image" alt="" />
        <div class="con">
          <span>{{ x.title }}</span>
          <p>{{ x.introduce }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="UICols"
>
import { useUIStore } from '@/store/ui'

const UI = useUIStore()
const props = defineProps({
  cfg: {
    type: Object,
    default: () => ({}),
  },
})

const UIStore = computed(() => props.cfg)

const title = computed(() => UIStore.value.title)
const data = computed(() => UIStore.value.data)
const style = computed(() => {
  const { top, left } = UIStore.value.style
  return { top, left }
})
const small = computed(() => UIStore.value.small === 'true')

const itemClick = (node) => {
  UI.go({ ...node, axis_id: UIStore.value.axis_id })
}
</script>

<style scoped>
.ui-cols {
  @apply absolute flex flex-col;
  padding: 1px;
  width: 200px;
}

.ui-cols-title {
  @apply text-white w-full overflow-hidden overflow-ellipsis whitespace-nowrap;
  background: url(../../assets/images/ui-colis-bg.svg) no-repeat center center / cover;
  font-size: 16px;
  padding: 1.5px 4.5px;
  line-height: 21px;
  margin-bottom: 6px;
}

.ui-cols-body {
  @apply flex-1;
  padding-right: 7px;
}

.ui-cols-item {
  @apply flex card-shandow overflow-hidden text-white;
  height: 75px;
  padding: 1px;
  border-radius: 6px;
  cursor: pointer;
}

.ui-cols-item+.ui-cols-item {
  margin-top: 10px;
}

.ui-cols-item.small {
  height: 57px;
}

.ui-cols-item img {
  @apply h-full block;
  width: 64px;
  min-width: 64px;
  object-fit: cover;
}

.ui-cols-item .con {
  width: calc(100% - 70px);
  padding: 8px 7.5px;
  box-sizing: border-box;
  position: relative;
}

.ui-cols-item .con span {
  @apply block whitespace-nowrap overflow-hidden overflow-ellipsis;
  font-size: 14px;
  line-height: 20px;
}

.ui-cols-item .con p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ui-cols-item .con .icon {
  position: absolute;
  bottom: 3px;
  right: 7.5px;
}

.ui-cols-item.small .con p {
  -webkit-line-clamp: 1;
}
</style>
